<template>
	<view>
		<action-bar backTitle="返回首页" title="支出预算"></action-bar>
		<view>
			<form>
				<view class="cu-form-group margin-top">
					<view class="title">本月预算</view>
					<input type="text" @click="modelDisplayEvent()" :placeholder="display.budgetNote" :value="show.budget" disabled>
				</view>
				<view class="cu-form-group margin-top">
					<view class="title">本月支出</view>
					<input type="text" :value="show.amount" disabled>
				</view>
			</form>
		</view>

		<!-- 修改预算模态框 -->
		<view class="cu-modal show" v-show="display.budgetModalVisible">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改预算</view>
				</view>
				<view class="padding-xl">
					<form>
						<view class="cu-form-group margin-top">
							<view class="title">预算</view>
							<input type="text" v-model="budget" :focus="display.budgetModalVisible">
						</view>
					</form>
					<view class="flex justify-center margin-top-xl">
						<button @click="modelDisplayEvent()" class="cu-btn">取消</button>
						<button v-if="display.budgetModalVisible" @click="changeBudget()" class="cu-btn bg-blue margin-left-xl">确定</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 饼状图 -->
		<view>
			<view v-if="show.warnning" 
				  class="flex align-center justify-center" 
				  style="width: 100vw;margin-top: 50rpx;">
				<view class="text-red">您本月花费已经超过预算啦!</view>
			</view>
			<view v-show="display.pie" class="charts-box">
				<qiun-data-charts
					type="pie"
					:chartData="chartData"
					:errorShow="false"
					canvasId="budget-pie"
					:tooltipShow="false"
					background="none"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				book_id: null,		// 账本ID
				budget: null,		// 预算
				amount: 0,
				show: {
					budget: 0,  	// 预算
					amount: null,	// 当月总支出
					warnning: false,// 提醒超余额
				},
				display: {
					pie: true,
					budgetModalVisible: false,
					budgetNote: '点我设置预算'
				},
				chartData:{
					categories:[],
					series:[
						{data: [
							{name: '支出', value: 120, color: 'red'},
							{name: '剩余', value: 0, color: 'green'}
						]}
					],
				},
			}
		},
		onLoad(option) {
			this.book_id = option.id
			this.show.amount = option.amount
			this.amount = option.amount
			this.queryBudget()
		},
		methods: {
			
			modelDisplayEvent() {
				this.display.budgetModalVisible = !this.display.budgetModalVisible  // 模态框展示
				this.display.pie = !this.display.budgetModalVisible  // 统计图隐藏
			},
			
			queryBudget() {
				this.$request({
					url: `/account/budget/${this.book_id}`
				}).then(res => {
					if (res && res.data.code == 200) {
						this.budget = res.data.budget || 0
						this.show.budget = res.data.budget
						this.calculateRemaining(this.amount, this.budget)
					}
				})
			},
			
			changeBudget() {
				if (this.budget == 0 || isNaN(this.budget)) {
					this.$message.info('请输入具体的预算')
					return
				} else if (String(this.budget).startsWith('0')) {
					this.$message.info('预算格式不正确, 请重新输入')
					return
				}
				
				this.$request({
					url: `/account/budget`,
					method: 'PUT',
					data: {
						id: this.book_id,
						budget: this.budget
					}
				}).then(res => {
					console.log('budget', res);
					if (res && res.data.code == 200) {
						this.show.budget = this.budget
						this.modelDisplayEvent()
						this.calculateRemaining(this.show.amount, this.budget)
						this.$message.success('修改成功!')
					}
				})
			},
			
			/**
			 * 计算统计图的数据
			 * @param {Object} amount 支出
			 * @param {Object} budget 预算
			 */
			calculateRemaining(amount, budget) {
				amount = Number(amount)
				this.chartData.series[0].data[0].value = amount // 支出
				let remaining = Number(budget) - amount // 计算预算剩余
				remaining = remaining > 0 ? remaining : 0
				this.chartData.series[0].data[1].value = Number(remaining)  // 预算余额
				this.show.warnning = remaining === 0
			}
		}
	}
</script>
<style>
	.charts-box{
		width: 750rpx;
		height:500rpx;
		
		margin-top: 100rpx;
	}
	
</style>
